import React, {useEffect, useState} from 'react';
import style from './NoteList.module.scss'
import MySurfacePlotTop from "../../component/MySurfacePlotTop/MySurfacePlotTop";
import {Button, Calendar, Divider, Empty, Popover, Spin, theme} from "antd";
import {CaretRightOutlined, DownloadOutlined} from "@ant-design/icons";
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
import useGetBlogType from "../../publicUse/useGetBlogType";
import {getBlogTextListApi} from "../../api/publicApi";
import MyNoteListItem from "../../component/MyNoteListItem/MyNoteListItem";

// 目录
function NoteList() {
    const {token} = theme.useToken();
    dayjs.locale('zh-cn');
    const blogTypeList = useGetBlogType()
    const [LoadingState, setLoadingState] = useState(false)
    const [listQuery, setListQuery] = useState({page: 1, limit: 4})
    const [tableData, setTableData] = useState([])
    const [searchData, setSearchData] = useState({})
    const [searchState, setSearchState] = useState(false)  //判断是点击了查看更多还是切换了查询条件
    const [allState, setAllState] = useState(false)  //判断是点击了全部文章
    let timeK = null

    // 日期样式
    const wrapperStyle = {
        width: 300,
        border: `1px solid ${token.colorBorderSecondary}`,
        borderRadius: token.borderRadiusLG,
    };

    //点击日期
    const onChange = (value) => {
        setListQuery({page: 1, limit: 4})
        setSearchData({blogReleaseDate: value.format('YYYY-MM-DD')})
    };

    // 点击左侧类型
    const setSearchDataType = (blogTypeNameK) => {
        setListQuery({page: 1, limit: 4})
        setSearchData({...searchData, blogTypeNameK: blogTypeNameK})
    }

    //日期组件
    const content = (
        <div style={wrapperStyle}>
            <Calendar fullscreen={false} onChange={onChange}/>
        </div>
    );

    // 筛选条件按钮
    const NoteListButton = (props) => {
        return (
            <div className={style.NoteListButtonList} onClick={() => setSearchDataType(props.name)}>
                <div className={style.NoteListButton}>
                    <span style={{margin: '0 10px'}}><CaretRightOutlined/></span>
                    <span>{props.name}</span>
                </div>
                <Divider className={style.NoteListDivider}></Divider>
            </div>
        )
    }

    // 查看更多方法
    const checkMore = () => {
        setListQuery({page: listQuery.page + 1, limit: listQuery.limit})
        setSearchState(true)
    }

    // 查看更多
    const returnLoading = () => {
        if (LoadingState) {
            return (
                <div>
                    <Spin/>
                </div>
            )
        } else {
            return (
                <div>
                    <Button type="link" icon={<DownloadOutlined/>} onClick={checkMore}>
                        查看更多
                    </Button>
                </div>
            )
        }
    }

    // 全部文章
    const allArticle = () => {
        setAllState(true)
        setListQuery({page: 1, limit: 4})
        setSearchData({})
    }

    // 请求博客列表
    const getBlogTextList = () => {
        setLoadingState(true)
        getBlogTextListApi({listQuery, searchData}).then(res => {
            if (JSON.stringify(searchData) === '{}') {
                if (allState) {
                    setTableData([...res.data.rows])
                    setAllState(false)
                } else {
                    setTableData([...tableData, ...res.data.rows])
                }
            } else {
                if (searchState) {
                    setTableData([...tableData, ...res.data.rows])
                    setSearchState(false)
                } else {
                    setTableData([...res.data.rows])

                }
            }
            setLoadingState(false)
        }).catch((e) => {
            console.log(e)
        })
    }

    // 监听查询条件的变化
    useEffect(() => {
        getBlogTextList()
        timeK = setInterval(() => {
            getBlogTextList()
        }, 300000)
        return () => {
            clearTimeout(timeK);
        }
    }, [listQuery, searchData])

    return (
        <div className={style.NoteList}>
            <div>
                <div className={style.NoteListContent}>
                    {/*左边*/}
                    <div className={style.NoteListMenu}>
                        <div>
                            <div className={style.NoteListButtonList} onClick={allArticle}>
                                <div className={style.NoteListButton}>
                                    <span style={{margin: '0 10px'}}><CaretRightOutlined/></span>
                                    <span>全部文章</span>
                                </div>
                                <Divider className={style.NoteListDivider}></Divider>
                            </div>
                            <Popover placement="right" content={content} trigger="click">
                                <div className={style.NoteListButtonList}>
                                    <div className={style.NoteListButton}>
                                        <span style={{margin: '0 10px'}}><CaretRightOutlined/></span>
                                        <span>日期筛选</span>
                                    </div>
                                    <Divider className={style.NoteListDivider}></Divider>
                                </div>
                            </Popover>
                            <Divider className={style.NoteListDivider}></Divider>
                        </div>
                        {blogTypeList.map((i, key) => {
                            return (
                                <NoteListButton key={key} name={i.blogTypeName}></NoteListButton>
                            )
                        })}
                    </div>
                    {/*右边*/}
                    <div className={style.NoteListBlogList}>
                        {/*博客列表*/}
                        <div>
                            {tableData.length === 0 ?
                                <div style={{marginTop: '100px'}}><Empty/></div> : tableData.map((item, key) => {
                                    return <MyNoteListItem item={item} key={key}></MyNoteListItem>
                                })}
                        </div>
                        {/*查看更多*/}
                        <div style={{
                            display: 'flex',
                            justifyContent: "center",
                            marginBottom: '20px'
                        }}> {tableData.length === 0 ? '' : returnLoading()}</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default NoteList;
